<!-- 汇总模块 -->
<template>
  <div class="sum">
    <el-row class="sum-list" :gutter="10">
      <el-col class="sum-list--item" v-for="(item,index) in data" :key="index" :xs="8" :sm="8" :md="8" :lg="6" :xl="4">
        <div class="sum-list--item-label">
          {{ item.label }}
        </div>
        <div class="sum-list--item-value">
          <span class="sum-list--item-value--int">
            {{ item.int }}
          </span>
          <span v-if="item.isDecimals"  class="sum-list--item-value--dec">
            .{{ item.dec }}
          </span>
          <span class="sum-list--item-value--unit">
            {{ item.unit }}
          </span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import { numFormat } from "@/utils";
import { computed } from "vue";
  interface sumItem {
    prop?: string
    label: string
    value: number
    decimals?: number
    unit?: string
    formatter?: Function
  }
  interface sumProps {
    config: sumItem []
    formData?: {
      [key:string]: any
    }
  }
  
  let props = withDefaults(defineProps<sumProps>(),{
    config: () => []
  })
  let unitDic:any = {
    '㎡':1,
    '元':1,
    '千':1000,
    '万':10000,
    '十万':100000,
    '百万':1000000,
    '千万':10000000,
    '亿元':100000000,
  }
  let data = computed(() => {
    return props.config.map((item: sumItem) => {
      let unit = item.unit && unitDic[Object.keys(unitDic).find(val => RegExp("^" + val).test(item.unit as string)) as string] || 1
      let val = props.formData && ((item.formatter && item.formatter(props.formData)) || item.prop && props.formData[item.prop]) || item.value || 0
      let value = (Number(val) / unit).toFixed(item.decimals || 2).split('.')
      return {
        ...item,
        int: numFormat(value[0]),
        dec: value[1],
        isDecimals: !!item.decimals
      }
    })
  })
</script>
<style lang="scss">
.sum{
  &-list{

    &--item{
      color: #fff;
      height: 4.3rem;
      font-size: 1.2rem;
      margin-bottom: 0.8rem;

      &-label{
        line-height: 1.6rem;
      }

      &-value{
        color: $spare15;
        height: 2.9rem;

        &--int{
          font-weight: bold;
          font-size: 2.2rem;
          line-height: 2.9rem;
        }

        &-dec,&-unit{
          line-height: 1.6rem;
          font-size: 1.2rem;
        }
      }
    }
  }
}
</style>

